<style lang="less" scoped>
@import "./charge.less";
</style>
<template>
  <div>
      <Row>
            <Col span="24">
                <Card>
                    <div>
                            <Table :columns="columnsList" :data="tableData" border disabled-hover></Table>
                    </div>
                    <div class="margin-top-15" style="text-align: center">
                            <Page :total="tableShow.count" :current="tableShow.page" :page-size="tableShow.size" @on-change="changePage" @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
                    </div>
                </Card>
            </Col>
        </Row>
  </div>
</template>
<script>
const resourse = "interest";
import axios from "axios";
export default {
  data() {
    return {
      columnsList: [
        {
          title: "序号",
          type: "index",
          align: "center"
        },
        {
          title: "类别",
          key: "type",
          align: "center"
        },
        {
          title: "用户",
            key: "user",
          align: "center",
          // render: (h, params) => {
          //   return h("div", params.row.user.real_name);
          // }
        },
        {
          title: "金额",
          key: "money",
          align: "center"
        },
        {
          title: "时间",
          key: "update_time",
          align: "center"
        },
        {
          title: "状态",
          align: "center",
          render: (h, params) => {
            return h(
              "Tag",
              {
                props: {
                  color:
                    params.row.status == 0
                      ? "yellow"
                      : params.row.status == 1
                        ? "green"
                        : params.row.status == 2 ? "red" : ""
                }
              },
              params.row.status == 0
                ? "未扣款"
                : params.row.status == 1
                  ? "已自动扣款"
                  : params.row.status == 2 ? "扣款失败" : ""
            );
          }
        }
      ],
      tableData: [],
      tableShow: {
        count: 0,
        page: 1,
        size: 10
      },
      created: 0.0
    };
  },
  created() {
    axios.get("recharge/create").then(response => {
      let res = response.data;
      if (res.code === 200) {
        this.created = res.data.total;
      } else {
        if (res.code === 403) {
          this.$store.commit("logout", this);
          this.$router.push({
            name: "login"
          });
        } else {
          this.$Message.error(res.msg);
        }
      }
    });
    // this.init();
    this.getList();
  },
  methods: {
    changePage(page) {
      this.tableShow.page = page;
      this.getList();
    },
    changeSize(size) {
      this.tableShow.size = size;
      this.getList();
    },
    getList() {
      axios.get(resourse,{params:{page:this.tableShow.page,size:this.tableShow.size}}).then(response => {
        let res = response.data;
        if (res.code === 200) {
          this.tableData = res.data.list;
          this.tableShow.count = res.data.count
        } else {
          if (res.code === 403) {
            this.$store.commit("logout", this);
            this.$router.push({
              name: "login"
            });
          } else {
            this.$Message.error(res.msg);
          }
        }
      });
    }
  }
};
</script>

